import { Button } from "antd";
import { useState } from "react";
import { connect } from "react-redux";
import { addPersonAction, deletePersonAction } from "../../redux/action/person";
import "./index.scss"

function Person(props) {
    let [person, updatePerson] = useState({ id: undefined, name: undefined, age: undefined, })

    const handleInput = (e, type) => {
        if (type === 'name') updatePerson({ id: new Date().getTime(), name: e.target.value, age: person.age, })
        if (type === 'age') updatePerson({ id: new Date().getTime(), name: person.name, age: e.target.value, })
    }

    const handleAdd = () => {
        console.log(person);
        props.add(person)
    }

    const handleDelete = (id) => {
        props.delete(id)
        return false
    }

    return <div className="personCom">
        <div className="addArea">
            <input type="text" onChange={(e) => { handleInput(e, 'name') }} placeholder="请输入姓名" />
            <input type="text" onChange={(e) => { handleInput(e, 'age') }} placeholder="请输入年龄" />
            <button onClick={handleAdd}>添加</button>
        </div>
        <ul>

            {props.person.map(item => {
                return <li key={item.id}>
                    <div>{item.name},{item.age}</div>
                    <Button size="small" type="dashed" onClick={() => handleDelete(item.id)}> 删除</Button>
                </li>
            })}
        </ul>
    </div>
}


export default connect(
    state => ({ person: state.person }),
    {
        add: addPersonAction,
        delete: deletePersonAction
    }
)(Person)